import React, { useState, useEffect } from 'react'
import './App.css'
// jsx 对象 React.createElement('div',{属性className:'hello'},子元素'Hello World')
// const Hello = () => <div>Hello World</div>;
// console.log(Hello);
// 1. JSX 优秀 且简单的UI 表达创新
// 2. JSX -> babel 转义 -> React.createElement
// Index  里状态是自有的，useStatae 响应式， 但是一般建议放在父组件中
// 便于多个子组件共享数据
// 子组件里  一般使用 props 参数对象
// 子组件里不要去添加自有状态，否则外界会不同步，除非外界不需要这个状态
const Header = () => {
  return (
    <div>
      < Title title = "首页"/>
    </div>
  )
}
const Main = ({users}) => {
  // users 外部
  return (
    <div>
      Mian
      <ul>
        {/* key 是 唯一的 */}
        {users.map(user => <li key={user.id}>{user.id} - {user.name} - {user.age}</li>)}
      </ul>
    </div>
  )
}
const Footer = ({count}) => {
  return (
    <div>
      Footer, 有{count}位用户
    </div>
  )
}
// props 父组件传给子组件 参数集合
const Title = (props) => {
  // const { title } = props
  return (
    <header>
      {props.title}
    </header>
  )
}
const Index = () => {
  // 不使用useState数据绑定，且响应
  // users 不够格成为状态
  // state 自有的，在父组件里
  const [users, setUsers] = useState([
  {
    name: '热巴',
    age: '20',
    id: 1
  },
  {
    name: '白鹿',
    age: 21,
    id: 2
  },
  {
    name: '露思',
    age: 19,
    id: 3
  }
]);
// 生命周期函数  onload  onDOMContentLoad
// Compent useEffect  代替  onDOMContentLoad
// 会等前面的元素渲染完后，再执行setTimeout
useEffect(() => {
  console.log('组件加载好了');
  setTimeout(() => {
    setUsers([...users,
    {
      name: '杨幂',
      age: 30,
      id: 4
    }
    ])
  }, 2000);
}, [])
// setTimeout(() => {
  // users.push({
  //   name: '杨幂',
  //   age: 22,
  //   id: 4
  // })
  
  // setUsers([...users, {
  //   name: '杨幂',
  //   age: 22,
  //   id: 4
  // }])
// }, 1000)
  return (
    // 如果唯一的父元素，只起到包裹作用，不需要标签，则可以省略为<></>
    <div>
      <Header />
      <Main users={users}/>
      <Footer count={users.length}/>
    </div>
  )
}
function App() {
    return (<Index />)
  // return <Hello />
  // return React.createElement('div',null,'Hello World'
    
}

export default App
